<template>
  <div v-if="screenshots && screenshots.length > 0" class="screenshot-carousel">
    <!-- 主图 -->
    <div class="relative overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800">
      <img
        :src="screenshots[currentIndex]"
        :alt="`${toolName} 截图 ${currentIndex + 1}`"
        class="w-full h-auto max-h-[500px] object-contain"
        @click="openLightbox"
      />
      
      <!-- 左右切换按钮 -->
      <button
        v-if="screenshots.length > 1"
        @click="prev"
        class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-white transition-all"
        aria-label="上一张"
      >
        <Icon name="heroicons:chevron-left" class="w-6 h-6" />
      </button>
      
      <button
        v-if="screenshots.length > 1"
        @click="next"
        class="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-white transition-all"
        aria-label="下一张"
      >
        <Icon name="heroicons:chevron-right" class="w-6 h-6" />
      </button>
      
      <!-- 计数器 -->
      <div class="absolute bottom-4 right-4 px-3 py-1 bg-black/60 text-white text-sm rounded-full">
        {{ currentIndex + 1 }} / {{ screenshots.length }}
      </div>
    </div>
    
    <!-- 缩略图 -->
    <div v-if="screenshots.length > 1" class="mt-4 flex gap-2 overflow-x-auto pb-2">
      <button
        v-for="(screenshot, index) in screenshots"
        :key="index"
        @click="currentIndex = index"
        class="flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition-all"
        :class="index === currentIndex 
          ? 'border-blue-600 dark:border-blue-400' 
          : 'border-transparent hover:border-gray-300 dark:hover:border-gray-600 opacity-60 hover:opacity-100'"
      >
        <img
          :src="screenshot"
          :alt="`${toolName} 缩略图 ${index + 1}`"
          class="w-full h-full object-cover"
        />
      </button>
    </div>
    
    <!-- 灯箱效果 (可选) -->
    <Teleport to="body">
      <div
        v-if="lightboxOpen"
        @click="closeLightbox"
        class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
      >
        <button
          @click.stop="closeLightbox"
          class="absolute top-4 right-4 w-10 h-10 bg-white/10 hover:bg-white/20 rounded-full flex items-center justify-center text-white transition-all"
          aria-label="关闭"
        >
          <Icon name="heroicons:x-mark" class="w-6 h-6" />
        </button>
        
        <img
          :src="screenshots[currentIndex]"
          :alt="`${toolName} 截图 ${currentIndex + 1}`"
          class="max-w-full max-h-full object-contain"
          @click.stop
        />
        
        <button
          v-if="screenshots.length > 1"
          @click.stop="prev"
          class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/10 hover:bg-white/20 rounded-full flex items-center justify-center text-white transition-all"
          aria-label="上一张"
        >
          <Icon name="heroicons:chevron-left" class="w-8 h-8" />
        </button>
        
        <button
          v-if="screenshots.length > 1"
          @click.stop="next"
          class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/10 hover:bg-white/20 rounded-full flex items-center justify-center text-white transition-all"
          aria-label="下一张"
        >
          <Icon name="heroicons:chevron-right" class="w-8 h-8" />
        </button>
      </div>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  screenshots: string[]
  toolName: string
}

const props = defineProps<Props>()

const currentIndex = ref(0)
const lightboxOpen = ref(false)

const next = () => {
  if (props.screenshots.length > 0) {
    currentIndex.value = (currentIndex.value + 1) % props.screenshots.length
  }
}

const prev = () => {
  if (props.screenshots.length > 0) {
    currentIndex.value = currentIndex.value === 0 
      ? props.screenshots.length - 1 
      : currentIndex.value - 1
  }
}

const openLightbox = () => {
  lightboxOpen.value = true
}

const closeLightbox = () => {
  lightboxOpen.value = false
}

// 键盘导航
if (process.client) {
  document.addEventListener('keydown', (e) => {
    if (lightboxOpen.value) {
      if (e.key === 'ArrowLeft') prev()
      if (e.key === 'ArrowRight') next()
      if (e.key === 'Escape') closeLightbox()
    }
  })
}
</script>

<style scoped>
.screenshot-carousel {
  @apply w-full;
}

/* 平滑过渡 */
img {
  transition: transform 0.3s ease;
}

img:hover {
  cursor: pointer;
}
</style>

